<template>
	<div class="search-box content-fade-upper">
		<input-angle style="z-index: 6; width: 200px; margin-left: 1%">
			<a-select v-model:value="area" clearable style="width: 100%" placeholder="区域" @change="handleAreaChange">
				<a-select-option v-for="(item, index) in formattedAreaOptions" :key="index" :label="item.name"
					:value="item.id">{{ item.name }}</a-select-option>
			</a-select>
		</input-angle>
		<!-- <input-angle style="z-index: 6; width: 10%; margin-left: 1%">
      <a-select ref="select" v-model:value="roadItem" style="width: 100%" placeholder="道路">
        <a-select-option
          v-for="(item, index) in formattedRoadOptions"
          :key="index"
          :value="item.name"
          >{{ item.name }}</a-select-option
        >
      </a-select>
    </input-angle> -->
		<input-angle style="z-index: 6; width: 200px; margin-left: 1%">
			<a-select ref="select" v-model:value="finished" style="width: 100%" placeholder="建设情况" mode="multiple">
				<a-select-option v-for="item in buildCondition" :key="item.value" :value="item.value">{{
          item.label
        }}</a-select-option>
			</a-select>
		</input-angle>

		<input-angle style="z-index: 6; width: 200px; margin-left: 1%">
			<!-- mode="multiple" -->
			<a-select v-model:value="roadLevel" style="width: 100%" placeholder="道路等级" mode="multiple">
				<a-select-option v-for="item in formattedRoadLevelOptions" :key="item.type"
					:value="item.type">{{ item.type }}</a-select-option>
			</a-select>
		</input-angle>
		<el-button type="primary" style="margin-left: 10px" :loading="loading" @click="handleSearch">查询</el-button>
		<el-button style="margin-left: 1%" @click="reset">重置</el-button>
		<slot></slot>
	</div>
</template>
<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		computed,
		onMounted,
		shallowRef
	} from 'vue';
	import inputAngle from './inputAngle.vue';
	import {
		areaOption,
		getQuery,
		roadOption,
		getAreaInfo,
		roadBlockInfoByRoadName
	} from '@/api/basic';
	import {
		polylineColor
	} from '@/utils/polyLineColor';
	import {
		useMapStore
	} from '@/store/modules/map';

	export default defineComponent({
		name: 'SearchForm',
		components: {
			inputAngle,
		},
		emits: ['reset', 'query-data'],
		setup(props, {
			emit
		}) {
			const mapStore = useMapStore();

			const map = computed(() => mapStore.ownMap);

			const allAreaOption = Object.freeze({
				name: '全部区域',
				id: ''
			});
			const allRoadOption = Object.freeze({
				name: '全部道路',
				id: ''
			});
			// const allRoadLevelOption = Object.freeze({ type:'全部道路等级' });
			const allRoadLevelOption = Object.freeze({});

			const defaultForm = Object.freeze({
				area: allAreaOption.id, // 区域的ID属性， 例：12, 空字符串默认选中全部区域
				areaName: allAreaOption.name, // 区域的name属性, 例： 兰山区
				roadLevel: allRoadLevelOption.type, // 道路等级，例： 主干路
				roadItem: allRoadOption.name, // 道路名称, 例：通达路
				finished: [], // 状态， 例： 2
			});

			const state = reactive({
				loading: false,
				roadOptions: [],
				areaOptions: [],

				...defaultForm,
			});

			const formattedRoadOptions = computed(() => [allRoadOption, ...(state.roadOptions || [])]);
			const formattedAreaOptions = computed(() => [allAreaOption, ...(state.areaOptions || [])]);
			// const formattedRoadLevelOptions = computed(() => [allRoadLevelOption, ...polylineColor]);
			const formattedRoadLevelOptions = computed(() => [...polylineColor].filter((item) => {
				return item.isShow
			})); //修改成了多选 不再做默认项

			const buildCondition = [
				// { value: '', label: '全部建设情况' },//修改成了多选 不再做默认项
				{
					value: '0',
					label: '按规划形成'
				},
				{
					value: '1',
					label: '未建'
				},
				{
					value: '2',
					label: '规划与建设不一致'
				},
				{
					value: '3',
					label: '在建'
				},
				{
					value: '5',
					label: '规划外'
				},
			];

			const handleAreaChange = (value, option) => {
				// 保留areaName, 后续接口要使用
				state.areaName = option.label;
				getRoadOptions(value);
			};

			const getRoadOptions = (areaId) => {
				if (!areaId) {
					state.roadOptions = [];
					state.roadItem = defaultForm.roadItem;
					return;
				}
				roadOption({
					areaId
				}).then((res) => {
					if (res) {
						state.roadOptions = res;
						state.roadItem = defaultForm.roadItem;
					}
				});
			};

			/**
			 * 重置
			 */
			const reset = () => {
				Object.assign(state, defaultForm);
				emit('reset');
			};

			const handleSearch = () => {
				// reset()
				state.loading = true;
				map.value?.clearOverlays();

				// 显示路线分级弹窗
				mapStore.setShowPolyline(true);
				// console.log("请求参数打印===>",state);
				// 未使用分页接口，因为需要全部数据画线
				let queryParams = {

					// 需要去除掉前端自己增加的全部选项
					area: state.areaName === allAreaOption.name ? undefined : state.areaName,
					roadName: state.roadItem === allRoadOption.name ? undefined : state.roadItem,
					roadItem: state.roadItem === allRoadOption.name ? undefined : state.roadItem,
					finished: state.finished.join(),
					roadLevel: state.roadLevel === allRoadLevelOption.type ? undefined : state.roadLevel
						.join(),
					// pageNum: 1,
					// pageSize: 10,
				}
				// 获取 state.finished 中的值对应的 label，并转换为字符串
				const selectedLabels = state.finished
					.map(value => {
						// 找到与 value 匹配的 label
						const condition = buildCondition.find(item => item.value === String(value));
						return condition ? condition.label : null; // 返回对应的 label 或 null
					})
					.filter(label => label !== null) // 过滤掉 null 值
					.join(', '); // 将结果合并成一个字符串

				let queryParams2 = {
					area: state.areaName || '全部区域',
					finished: selectedLabels || '全部建设情况',
					roadLevel: state.roadLevel ? state.roadLevel.join() : '全部道路等级'
				}
				// let queryParams3 = {
				// 	roadName: 'ZDQY_泰盛广场商圈_解放路_6'
				// }
				// roadBlockInfoByRoadName(queryParams3)
				// 	.then((res) => {
				// 		console.log("res===>==", res);

				// 	})
				// 	.catch((e) => {
				// 		console.log('e :>> ', e);

				// 	});
				getAreaInfo(queryParams)
					.then((res) => {
						// console.log("res===>==",res);
						state.loading = false;
						emit('query-data', {
							data: res,
							params: queryParams,
							params2: queryParams2,
						} || []);
					})
					.catch((e) => {
						console.log('e :>> ', e);
						state.loading = false;
						emit('query-data', []);
					});
				// getQuery({
				//   // 需要去除掉前端自己增加的全部选项
				//   area: state.areaName === allAreaOption.name ? undefined : state.areaName,
				//   roadName: state.roadItem === allRoadOption.name ? undefined : state.roadItem,
				//   roadItem: state.roadItem === allRoadOption.name ? undefined : state.roadItem,
				//   finished: state.finished.join(),
				//   roadLevel: state.roadLevel === allRoadLevelOption.type ? undefined : state.roadLevel.join(),
				//   pageNum: 1,
				//   pageSize: 10,
				// })
				//   .then((res) => {
				//     state.loading = false;
				//     emit('query-data', res || []);
				//   })
				//   .catch((e) => {
				//     console.log('e :>> ', e);
				//     state.loading = false;
				//     emit('query-data', []);
				//   });
			};

			onMounted(() => {
				areaOption().then((res) => {
					state.areaOptions = res;
				});
				getRoadOptions();
			});

			return {
				buildCondition,
				handleSearch,
				...toRefs(state),
				handleAreaChange,
				reset,
				formattedRoadLevelOptions,
				formattedRoadOptions,
				formattedAreaOptions,
			};
		},
	});
</script>
<style lang="less" scoped>
	::v-deep .el-input__inner {
		color: #fff;
	}

	.search-box {
		position: absolute;
		top: 1%;
		left: 0;
		right: 100px;
		z-index: 4;
		margin-bottom: 10px;
		padding: 0 30px;
		padding-right: 0;
		display: flex;
		align-items: center;
		width: auto;
	}

	:deep(.el-input__wrapper) {
		background-color: #ffffff00;
		box-shadow: 0px 0px 0px;
		color: white;
		// height: 2.5vw;
		// line-height: 2.5vw;
	}

	:deep .el-select {
		--el-select-border-color-hover: none;
		--el-select-input-focus-border-color: none;
	}

	.el-range-separator {
		color: #ffffffff;
	}

	:deep(.ant-select-item-option-selected) {
		&:not(.ant-select-item-option-disabled) {
			background-color: #ffffff00 !important;
		}
	}

	:deep(.ant-select-selection-item) {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	:deep(.ant-select-selection-item-remove) {
		color: @white-color;
	}

	:deep(.ant-select-multiple .ant-select-selection-item-remove:hover) {
		color: @white-color;
	}

	:deep(.ant-select-dropdown) {
		// background: url('') no-repeat !important;
	}
</style>